<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="box">
          <div class="itemBox">
            <ul>
              <li>
                <div class="n">{{ $t("page4.doc11") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input
                      type="text"
                      :placeholder="$t('page4.doc12')"
                      v-model="countryName"
                    />
                  </div>
                </div>
              </li>
              <li>
                <div class="n">{{ $t("page4.doc13") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input
                      type="text"
                      :placeholder="$t('page4.doc14')"
                      v-model="name"
                    />
                  </div>
                </div>
              </li>
              <li>
                <div class="n">{{ $t("page4.doc15") }}</div>
                <div class="val flex">
                  <div class="flex1 flex2" @click="type_show = true">
                    <input type="text" v-model="typeName" readonly />
                    <van-icon class="icon" color="#B5B5B5" name="arrow" />
                  </div>
                </div>
              </li>
              <li>
                <div class="n">{{ $t("page4.doc16") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input
                      type="text"
                      :placeholder="$t('page4.doc17')"
                      v-model="identityNumber"
                    />
                  </div>
                </div>
              </li>
              <li>
                <!--邮箱验证码-->
                <SendCodeInp
                    v-model="code"
                    :title="$t('page4.doc156')"
                    :placeholder="$t('page4.doc157')"
                    :rightText="userData.email"
                    :accountType="1"
                    :account="userData.email"
                    verifyType="4"
                    class="real-name mt"
                />
              </li>
              <li>
                <div class="n">{{ $t("page4.doc18") }}</div>
                <div class="upload-wrapper">
                  <div class="ul">
                    <div
                      class="li"
                      @click="picClick(index)"
                      v-for="(item, index) in pic_list"
                      :key="index"
                    >
                      <div class="pic">
                        <div v-if="item.files">
                          <img :src="item.files" alt="" />
                        </div>
                        <div v-else>
                          <img src="@/assets/images/my/upload-item.png" alt="">
                        </div>
                        <input
                          class="file"
                          type="file"
                          accept="image/*"
                          @change="handleAfterRead"
                        />
                      </div>
                      <div class="title" v-if="!item.files">{{ item.name }}</div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="bot">
            <button class="btn" @click="onBtn()" :disabled="isDisable">
              {{ $t("page4.doc22") }}
            </button>
          </div>
        </div>
      </div>
      <van-popup v-model="type_show" round position="bottom">
        <van-picker
          :title="$t('page.doc9')"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height="48px"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
        />
      </van-popup>
    </template>
  </page-scroll>
</template>

<script>
export default {
  data() {
    return {
      title: this.$t("title.doc51"),
      type_show: false,
      countryName: "",
      name: "",
      identityNumber: "",
      columns: [this.$t("page4.doc23"), this.$t("page4.doc24")],
      typeName: this.$t("page4.doc23"),
      type: 0,
      pic_list: [
        { name: this.$t("page4.doc19"), files: "" },
        { name: this.$t("page4.doc20"), files: "" },
        { name: this.$t("page4.doc21"), files: "" },
      ],
      pic_list1: [
        { name: this.$t("page4.doc19"), files: "" },
        { name: this.$t("page4.doc20"), files: "" },
        { name: this.$t("page4.doc21"), files: "" },
      ],
      pic_list2: [
        { name: this.$t("page4.doc19"), files: "" },
        { name: this.$t("page4.doc21"), files: "" },
      ],
      pic_index: 0,
      isDisable: false,
      code: "",
    };
  },
  mounted() {},
  computed: {
    userData() {
      return this.$store.state.userData;
    }
  },
  methods: {
    onConfirm(value, index) {
      this.type_show = false;
      this.typeName = value;
      this.type = index;
      this.identityNumber = "";
      this.pic_list = [];
      if (index == 0) {
        this.pic_list = this.pic_list1;
      } else {
        this.pic_list = this.pic_list2;
      }
      this.pic_list.map((item) => {
        item.files = "";
      });
    },
    onCancel() {
      this.type_show = false;
    },
    picClick(i) {
      this.pic_index = i;
    },

    //图片上传
    async handleAfterRead(e) {
      console.log(e.target);
      console.log(e.target.value);

      const toast = this.$toast.loading({
        forbidClick: true,
      });
      const file = await this.common
        .compressor(e, {})
        .catch(() => {
          toast.clear();
          return;
        });

      this.$post(this.URL.user.upimg, file, {
        isUpload: true,
      })
        .then((res) => {
          if (res.code == 0) {
            this.pic_list[this.pic_index].files = res.data.url;
          }
          this.$toast(res.message);
          e.target.value = ''
        })
        .finally(() => {
          e.target.value = ''
          toast.clear();
        });
    },
    onOversize(file) {
      if (file) {
        // this.$toast('文件大小不能超过 3M');
        this.$toast(this.$t("page4.doc50"));
      }
    },
    beforeRead(file) {
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg"
      ) {
        // this.$toast('请上传 png/jpg/jpeg 格式图片');
        this.$toast(this.$t("page4.doc51", { k: "png/jpg/jpeg" }));
        return false;
      }
      return true;
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
    onBtn() {
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 2000);
      if (!this.isDisable) {
        return;
      }

      let frontCertificate = this.pic_list[0].files;
      let reverseCertificate = "";
      let handFrontCertificate = "";
      if (this.pic_list.length == 2) {
        reverseCertificate = "";
        handFrontCertificate = this.pic_list[1].files;
      } else {
        reverseCertificate = this.pic_list[1].files;
        handFrontCertificate = this.pic_list[2].files;
      }

      if (!this.countryName) {
        this.$toast.fail(this.$t("page4.doc12"));
        return;
      }
      if (!this.name) {
        this.$toast.fail(this.$t("page4.doc14"));
        return;
      }
      if (!this.identityNumber) {
        this.$toast.fail(this.$t("page4.doc17"));
        return;
      }
      if (!this.code) {
        return this.$toast(this.$t('page4.doc157'));
      }
      if (!frontCertificate) {
        this.$toast.fail(this.$t("page4.doc25"));
        return;
      }
      if (!reverseCertificate && this.type == 0) {
        this.$toast.fail(this.$t("page4.doc26"));
        return;
      }
      if (!handFrontCertificate) {
        this.$toast.fail(this.$t("page4.doc21"));
        return;
      }

      this.$post(this.URL.user.identity, {
        code: this.code,
        name: this.name,
        type: this.type,
        countryName: this.countryName,
        identityNumber: this.identityNumber,
        frontCertificate: frontCertificate,
        reverseCertificate: reverseCertificate,
        handFrontCertificate: handFrontCertificate,
      }).then((res) => {
        if (res.code == 0) {
          this.$toast(res.message);
          this.countryName = "";
          this.name = "";
          this.identityNumber = "";
          this.pic_list.map((item) => {
            item.files = "";
          });

          // 状态(-2-未实名, -1-不通过， 0-待审核， 1-通过)
          if (res.status == 1) {
            this.path_url("/my/prompt_success");
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: #330e11 !important;
}

.page {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.upload-wrapper {
  .ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;

    .li {
      position: relative;
      width: 48%;
      margin-bottom: 16px;

      .title {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 10px;
        text-align: center;
      }

      img {
        width: 100%;
        height: 120px;
      }

      .file {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.itemBox {
  margin-bottom: 20px;
  background: transparent;
  padding: 0;
}

.btn {
  border-radius: 0.16rem;
}
.box {
  padding-top: 0.3rem;
  ul {
    li {
      margin-bottom: 0.32rem;
      .flex1 {
        height: 100%;
        border-radius: 0.16rem;
        padding: 0 0.3rem;
        line-height: 48px;
        background: #231417;
      }
      .real-name{
        /deep/ .title_box{
          font-size: .26rem;
        }
        /deep/ .inp_content_box{
          background: #231417;
          height: 48px;
          input{
           font-size: .26rem;
            &::placeholder{
              font-size: .26rem;
            }
          }
        }
      }
      .flex2 {
        display: flex;
        align-items: center;
      }
      .val {
        border-radius: 0.16rem;
        .ul {
          width: 100%;
          display: flex;
          align-content: space-around;
          .li {
            border-radius: 0.1rem;
            margin-right: 0.26rem;
            width: 30%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            background: var(--CObackgroundLinear3);
            .pic {
              padding: 0.32rem 0.24rem;
              position: relative;
              img {
                height: 0.92rem;
                width: 1.42rem;
              }
              .pic_icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-0.36rem, -0.36rem);
                width: 0.72rem;
                height: 0.72rem;
              }
              .file {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                width: 100%;
                height: 100%;
              }
            }
            .title {
              font-size: 0.28rem;
              font-family: PingFangTC-Regular, PingFangTC;
              font-weight: 400;
              color: var(--COcolor3);
              line-height: 0.36rem;
              text-align: center;
              padding: 0.14rem;
              background: var(--CObackgroundLinear1);
              border-bottom-left-radius: 0.1rem;
              border-bottom-right-radius: 0.1rem;
              word-break: break-all;
              word-wrap: break-word;
              flex: 1;
            }
          }
          li:last-child {
            margin-right: 0rem;
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
        input {
          width: 100%;
          background: none;
          height: 48px;
          border: 0;
          &::placeholder {
            font-size: 0.26rem;
          }
        }
      }
    }
    li:last-child {
      margin-bottom: 0;
    }
  }
  .n {
    margin-bottom: 0.26rem;
    font-size: 0.26rem;
    font-weight: 500;
    color: #fff;
  }
}
.bot {
  padding-top: 0.3rem;
}
.btn {
  border-radius: 999px;
  background: linear-gradient(90.25deg, #DC5B6E 0.21%, #D31733 99.79%);
  color: var(--COcolor3);
}

:deep(.send_text) {
  color: #ffff00 !important;
}
</style>
